﻿<template>
  <div class="project-container">
    <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
       <!--<Breadcrumb style="position: absolute;font-size: 18px;" />  -->
      <div style="text-align: right;vertical-align: bottom;height: 50px;margin-top: 10px;">
        <el-button style="width: 100px;height: 30px;background-color: #fff;border-color: gray;color: black;"
          type="primary" @click="openaddproject" v-auth="'project:add'"> {{ t('message.pageConfiguration.add') }}
        </el-button>
        <el-button style="width: 100px;height: 30px;background-color: #fff;border-color: gray;color: black;"
          v-if="state.selectlist.length > 0" type="danger" @click="bacthDelete" v-auth="'project:batchDelete'"> {{
            t('message.pageConfiguration.batchDel') }} </el-button>
        <el-button style="width: 120px;height: 30px;background-color: #fff;border-color: gray;color: black;" 
          type="primary" @click="downTemplete" v-auth="'project:upload'"> {{
            t('message.pageConfiguration.downloadTemplate') }} </el-button>
        <el-button style="width: 100px;height: 30px;" type="primary" @click="openUploadDialog"
          v-auth="'project:upload'"> {{ t('message.pageConfiguration.upload') }} </el-button>  
      </div>
      <TableSearch :search="tb.tableData.search" @search="onSearch" />
    </el-card>
    <el-card class="full-table" shadow="hover" style="margin-top: 8px">
      <Table ref="tableRef" v-bind="tb.tableData" :getData="getData" :exportChangeData="exportChangeData"
        @sortHeader="onSortHeader" @selectionChange="tableSelection" border="">
        <!-- <template #command="">
          <el-button type="primary" icon="ele-Plus" @click="openaddproject" v-auth="'project:add'"> {{ t('message.pageConfiguration.add') }} </el-button>
          <el-button v-if="state.selectlist.length > 0" type="danger" icon="ele-Delete" @click="bacthDelete" v-auth="'project:batchDelete'"> {{ t('message.pageConfiguration.batchDel') }} </el-button>
          <el-button type="primary" icon="ele-Download" @click="downTemplete" v-auth="'project:upload'"> {{ t('message.pageConfiguration.downloadTemplate') }} </el-button>
          <el-button type="primary" icon="ele-Plus" @click="openUploadDialog" v-auth="'project:upload'"> {{ t('message.pageConfiguration.upload') }} </el-button>
        </template> -->
        <template #action="scope">
          <el-button icon="ele-Edit" size="small" text="" type="primary" @click="toquestion(scope.row)"
            v-auth="'project:edit'" > {{t("message.questionInfo.Questionnaire")}}  </el-button>
<!--          <el-button icon="ele-Edit" size="small" text="" type="primary" @click="opendetail(scope.row)"-->
<!--            v-auth="'project:edit'"> {{ t("message.questionInfo.sulotion") }} </el-button>-->
          <el-button icon="ele-Edit" size="small" text="" type="primary" @click="openedit(scope.row)"
            v-auth="'project:edit'" > {{ t('message.pageConfiguration.edit') }} </el-button>
          <el-button icon="ele-Delete" size="small" text="" type="danger" @click="delConfig(scope.row)"
            v-auth="'project:delete'" > {{ t('message.pageConfiguration.del') }} </el-button>
        </template>
      </Table>
    </el-card>

    <Detail ref="DetailRef" />
    <editDialog ref="editDialogRef" :title="state.editprojectTitle" :groupList="state.groupList"
      @updateData="updateData" />
    <uploaddialog ref="uploaddialogRef" :import-data="importData" />
    <combineproject ref="combineprojectRef" />
    <DetailQa ref="detailQa"/>
  </div>
</template>

<script lang="ts" setup="" name="project">
import { onMounted, onUnmounted, reactive, ref, defineAsyncComponent, nextTick, watch,provide  } from 'vue';

import Detail from '/@/views/main/projectResult/component/Detail.vue'
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/topBar/breadcrumb.vue'));
import { ElMessageBox, ElMessage } from 'element-plus';
import mittBus from '/@/utils/mitt';
import editDialog from '/@/views/main/project/component/editDialog.vue'
import DetailQa from '/@/views/main/project/component/detailQa.vue'
import combineproject from '/@/views/main/project/component/combineproject.vue'
import { getDictDataItem as di, getDictDataListToSelect as dl } from '/@/utils/dict-utils';
import { pageProject, deleteProject, batchDeleteProject, importProject, downLoadProject } from '/@/api/main/project';
import { getAPI } from '/@/utils/axios-utils';
import { SysEnumApi } from '/@/api-services/api';
import commonFunction from '/@/utils/commonFunction';
import { auth } from '/@/utils/authFunction'
import { useI18n } from 'vue-i18n';

import router from "/@/router";
const DetailRef =ref();
const detailQa = ref();
const { t, locale } = useI18n();
const { downFile } = commonFunction();
// 引入组件
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));

const uploaddialog = defineAsyncComponent(() => import('/@/components/table/uploaddialog.vue'));
const uploaddialogRef = ref();
const combineprojectRef = ref();
const loading = ref();




// 页面加载时
onMounted(async () => {
});
const tableRef = ref<RefType>();
const editDialogRef = ref();
const state = reactive({
  editprojectTitle: '',
  selectlist: [] as EmptyObjectType[],
  groupList: [] as Array<String>
  ,
});






// 提供刷新方法
provide('refreshParent', () => {

tableRef.value.handleList();
});




const tb = reactive<TableDemoState>
  ({
    tableData: {

      // 表头内容（必传，注意格式）
      columns: [
        { prop: 'projectNo', width: 130, label: t('message.project.projectNo'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'projectName', width: 130, label: t('message.project.projectName'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'customerCode', width: 130, label: t('message.project.customerCode'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'customerName', width: 130, label: t('message.project.customerName'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'comAddr', width: 130, label: t('message.project.comAddr'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'comPhone', width: 130, label: t('message.project.comPhone'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'contact', width: 130, label: t('message.project.contact'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'cusAddr', width: 130, label: t('message.project.cusAddr'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'cusPhone', width: 130, label: t('message.project.cusPhone'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'cusTel', width: 130, label: t('message.project.cusTel'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'cADFiles', width: 130, label: t('message.project.cADFiles'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'rawOrders', width: 130, label: t('message.project.rawOrders'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'status', width: 130, label: t('message.project.status'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'def1', width: 130, label: t('message.project.def1'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'def2', width: 130, label: t('message.project.def2'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'def3', width: 130, label: t('message.project.def3'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'def4', width: 130, label: t('message.project.def4'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'def5', width: 130, label: t('message.project.def5'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'createUserName', width: 130, label: t('message.project.createUserName'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'updateUserName', width: 130, label: t('message.project.updateUserName'), headerAlign: 'center', toolTip: true, sortable: 'custom', isCheck: true },
        { prop: 'action', width: 200, label: t('message.pageConfiguration.operate'), type: 'action', align: 'center', isCheck: true, fixed: 'right', hideCheck: true },
      ],
      // 配置项（必传）
      config: {
        isStripe: true, // 是否显示表格斑马纹
        isBorder: false, // 是否显示表格边框
        isSerialNo: false, // 是否显示表格序号
        isSelection: true, // 是否勾选表格多选
        showSelection: auth('project:batchDelete'), //是否显示表格多选
        pageSize: 20, // 每页条数
        hideExport: false, //是否隐藏导出按钮
        exportFileName: 'project', //导出报表的文件名，不填写取应用名称
      },
      // 搜索表单，动态生成（传空数组时，将不显示搜索，type有3种类型：input,date,select）
      search: [
        { label: t('message.project.projectNo'), prop: 'projectNo', placeholder: t('message.project.projectNo'), required: false, type: 'input' },
        { label: t('message.project.projectName'), prop: 'projectName', placeholder: t('message.project.projectName'), required: false, type: 'input' },
        { label: t('message.project.customerCode'), prop: 'customerCode', placeholder: t('message.project.customerCode'), required: false, type: 'input' },
        { label: t('message.project.customerName'), prop: 'customerName', placeholder: t('message.project.customerName'), required: false, type: 'input' },
        { label: t('message.project.comAddr'), prop: 'comAddr', placeholder: t('message.project.comAddr'), required: false, type: 'input' },
        { label: t('message.project.comPhone'), prop: 'comPhone', placeholder: t('message.project.comPhone'), required: false, type: 'input' },
        { label: t('message.project.contact'), prop: 'contact', placeholder: t('message.project.contact'), required: false, type: 'input' },
        { label: t('message.project.cusAddr'), prop: 'cusAddr', placeholder: t('message.project.cusAddr'), required: false, type: 'input' },
        { label: t('message.project.cusPhone'), prop: 'cusPhone', placeholder: t('message.project.cusPhone'), required: false, type: 'input' },
        { label: t('message.project.cusTel'), prop: 'cusTel', placeholder: t('message.project.cusTel'), required: false, type: 'input' },
        { label: t('message.project.rawOrders'), prop: 'rawOrders', placeholder: t('message.project.rawOrders'), required: false, type: 'input' },
        { label: t('message.project.def1'), prop: 'def1', placeholder: t('message.project.def1'), required: false, type: 'input' },
        { label: t('message.project.def2'), prop: 'def2', placeholder: t('message.project.def2'), required: false, type: 'input' },
        { label: t('message.project.def3'), prop: 'def3', placeholder: t('message.project.def3'), required: false, type: 'input' },
        { label: t('message.project.def4'), prop: 'def4', placeholder: t('message.project.def4'), required: false, type: 'input' },
        { label: t('message.project.def5'), prop: 'def5', placeholder: t('message.project.def5'), required: false, type: 'input' },
        { label: t('message.project.createUserName'), prop: 'createUserName', placeholder: t('message.project.createUserName'), required: false, type: 'input' },
        { label: t('message.project.updateUserName'), prop: 'updateUserName', placeholder: t('message.project.updateUserName'), required: false, type: 'input' },
      ],
      param: {},
      defaultSort: {
        prop: 'createTime',
        order: 'ascending',
      },
    },
  });

  
// 监听语言切换
watch(locale, async () => {
  
  // 更新表头和搜索表单的国际化文本
  tb.tableData.columns.forEach(column => {
    switch (column.prop) {
      case 'id':
        column.label = t('message.project.id');
        break;
      case 'projectNo':
        column.label = t('message.project.projectNo');
        break;
      case 'projectName':
        column.label = t('message.project.projectName');
        break;
      case 'customerCode':
        column.label = t('message.project.customerCode');
        break;
      case 'customerName':
        column.label = t('message.project.customerName');
        break;
      case 'comAddr':
        column.label = t('message.project.comAddr');
        break;
      case 'comPhone':
        column.label = t('message.project.comPhone');
        break;
      case 'contact':
        column.label = t('message.project.contact');
        break;
      case 'cusAddr':
        column.label = t('message.project.cusAddr');
        break;
      case 'cusPhone':
        column.label = t('message.project.cusPhone');
        break;
      case 'cusTel':
        column.label = t('message.project.cusTel');
        break;
      case 'cADFiles':
        column.label = t('message.project.cADFiles');
        break;
      case 'rawOrders':
        column.label = t('message.project.rawOrders');
        break;
      case 'status':
        column.label = t('message.project.status');
        break;
      case 'def1':
        column.label = t('message.project.def1');
        break;
      case 'def2':
        column.label = t('message.project.def2');
        break;
      case 'def3':
        column.label = t('message.project.def3');
        break;
      case 'def4':
        column.label = t('message.project.def4');
        break;
      case 'def5':
        column.label = t('message.project.def5');
        break;
      case 'createUserName':
        column.label = t('message.project.createUserName');
        break;
      case 'updateUserName':
        column.label = t('message.project.updateUserName');
        break;
      case 'action':
        column.label = t('message.pageConfiguration.operate');
        break;
    }
  });

  // 更新搜索表单的国际化文本
  tb.tableData.search.forEach(searchItem => {
    switch (searchItem.prop) {
      case 'id':
        searchItem.label = t('message.project.id');
        searchItem.placeholder = t('message.project.id');
        break;
      case 'projectNo':
        searchItem.label = t('message.project.projectNo');
        searchItem.placeholder = t('message.project.projectNo');
        break;
      case 'projectName':
        searchItem.label = t('message.project.projectName');
        searchItem.placeholder = t('message.project.projectName');
        break;
      case 'customerCode':
        searchItem.label = t('message.project.customerCode');
        searchItem.placeholder = t('message.project.customerCode');
        break;
      case 'customerName':
        searchItem.label = t('message.project.customerName');
        searchItem.placeholder = t('message.project.customerName');
        break;
      case 'comAddr':
        searchItem.label = t('message.project.comAddr');
        searchItem.placeholder = t('message.project.comAddr');
        break;
      case 'comPhone':
        searchItem.label = t('message.project.comPhone');
        searchItem.placeholder = t('message.project.comPhone');
        break;
      case 'contact':
        searchItem.label = t('message.project.contact');
        searchItem.placeholder = t('message.project.contact');
        break;
      case 'cusAddr':
        searchItem.label = t('message.project.cusAddr');
        searchItem.placeholder = t('message.project.cusAddr');
        break;
      case 'cusPhone':
        searchItem.label = t('message.project.cusPhone');
        searchItem.placeholder = t('message.project.cusPhone');
        break;
      case 'cusTel':
        searchItem.label = t('message.project.cusTel');
        searchItem.placeholder = t('message.project.cusTel');
        break;
      case 'cADFiles':
        searchItem.label = t('message.project.cADFiles');
        searchItem.placeholder = t('message.project.cADFiles');
        break;
      case 'rawOrders':
        searchItem.label = t('message.project.rawOrders');
        searchItem.placeholder = t('message.project.rawOrders');
        break;
      case 'status':
        searchItem.label = t('message.project.status');
        searchItem.placeholder = t('message.project.status');
        break;
      case 'def1':
        searchItem.label = t('message.project.def1');
        searchItem.placeholder = t('message.project.def1');
        break;
      case 'def2':
        searchItem.label = t('message.project.def2');
        searchItem.placeholder = t('message.project.def2');
        break;
      case 'def3':
        searchItem.label = t('message.project.def3');
        searchItem.placeholder = t('message.project.def3');
        break;
      case 'def4':
        searchItem.label = t('message.project.def4');
        searchItem.placeholder = t('message.project.def4');
        break;
      case 'def5':
        searchItem.label = t('message.project.def5');
        searchItem.placeholder = t('message.project.def5');
        break;
      case 'createUserName':
        searchItem.label = t('message.project.createUserName');
        searchItem.placeholder = t('message.project.createUserName');
        break;
      case 'updateUserName':
        searchItem.label = t('message.project.updateUserName');
        searchItem.placeholder = t('message.project.updateUserName');
        break;
    }
  });

  // 等待下一次 DOM 更新循环完成后再进行表格刷新
  await nextTick();
  tableRef.value?.handleList(); // 刷新表格数据
});
const opendetail = (row:any) => {
  console.log('detail',row)
  DetailRef.value?.openDialog(row);
};
const getData = async (param: any) => {

  loading.value = true;
  var res = await pageProject(Object.assign(param));

  loading.value = false;
    console.log('cc');
  console.log(res.data);
  return res.data;
};
const toquestion = (row: any) => {
  detailQa.value.openDialog(row);
}
const tosulotion = (row: any) => {
  router.push({
    path: '/project/solutioninfo',
    query: {
      ProjectNo: row.projectNo
    }
  });
}
const exportChangeData = (data: Array<EmptyObjectType>
) => {
  data.forEach((item) => {
    item.sysFlag = item.sysFlag == 1 ? t('message.project.yes') : t('message.project.no');
  });
  return data;
};
// 拖动显示列排序回调
const onSortHeader = (data: object[]) => {
  tb.tableData.columns = data;
};
// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
  tb.tableData.param = Object.assign({}, tb.tableData.param, { ...data });
  nextTick(() => {
    tableRef.value.pageReset();
  });
};

const getGroupList = async () => {

};

//表格多选事件
const tableSelection = (data: EmptyObjectType[]) => {
  // console.log('表格多选事件', data)
  state.selectlist = data;
};

onMounted(async () => {
  getGroupList();
});

// 更新数据
const updateData = () => {
  tableRef.value.handleList();
  getGroupList();
};

// 打开新增页面
const openaddproject = () => {
  state.editprojectTitle = t('message.project.addproject');
  // combineprojectRef.value?.openpage();
  editDialogRef.value?.openDialog({});
};

// 打开编辑页面
const openedit = (row: any) => {
  state.editprojectTitle = t('message.project.editproject');
  editDialogRef.value?.openDialog(row);
};

// 删除
const delConfig = (row: any) => {
  ElMessageBox.confirm(t('message.messages.confirmDel') + `：【${row[tb.tableData.columns[1].prop.toString()]}】?`, t('message.messages.hint'), {
    confirmButtonText: t('message.messages.confirm'),
    cancelButtonText: t('message.messages.cancel'),
    type: 'warning',
  })
    .then(async () => {
      await deleteProject({ id: row.id });
      tableRef.value.handleList();
      ElMessage.success(t('message.messages.deleteSuccess'));
    })
    .catch(() => { });
};

//批量删除
const bacthDelete = () => {
  if (state.selectlist.length == 0) return false;
  ElMessageBox.confirm(t('message.messages.confirmBatchDel') + `【${state.selectlist[0].name}】${state.selectlist.length}` + t('message.messages.con'), t('message.messages.hint'), {
    confirmButtonText: t('message.messages.confirm'),
    cancelButtonText: t('message.messages.cancel'),
    type: 'warning',
  })
    .then(async () => {
      const ids = state.selectlist.map((item) => {
        return item.id;
      });
      var res = await batchDeleteProject(ids);
      tableRef.value.pageReset();
      ElMessage.success(t('message.messages.deleteSuccess'));
    })
    .catch(() => { });



};




// 打开上传页面
const openUploadDialog = () => {
  uploaddialogRef.value.openUploadDialog();
};
const importData = async (param: any) => {
  var res = await importProject(param);
  return res;
};

const downTemplete = async () => {
  var res = await downLoadProject();
  downFile(res);
}
</script>
